<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	    <link rel="stylesheet" href="../../admin/css/other/result.css" />
	</head>
	<body class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="line1" style="min-height:400px;"></div>
					</div>
				</div>
			</div>
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="line2" style="min-height:400px;"></div>
					</div>
				</div>
			</div>
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="line3" style="min-height:400px;"></div>
					</div>
				</div>
			</div>
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="line4" style="min-height:400px;"></div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script src="../../script/line1.js"></script>
		<script src="../../script/line2.js"></script>
		<script src="../../script/line3.js"></script>
		<script src="../../script/line4.js"></script>

		<script>
			layui.use(['echarts'], function() {
				let echarts = layui.echarts;

				var line2 = echarts.init(document.getElementById('line2'));

				const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
				option = {
					backgroundColor: '#fff',
					title: {
						text: '全国6月销售统计',
						textStyle: {
							fontSize: 12,
							fontWeight: 400
						},
						left: 'center',
						top: '5%'
					},
					legend: {
						icon: 'circle',
						top: '5%',
						right: '5%',
						itemWidth: 6,
						itemGap: 20,
						textStyle: {
							color: '#556677'
						}
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							label: {
								show: true,
								backgroundColor: '#fff',
								color: '#556677',
								borderColor: 'rgba(0,0,0,0)',
								shadowColor: 'rgba(0,0,0,0)',
								shadowOffsetY: 0
							},
							lineStyle: {
								width: 0
							}
						},
						backgroundColor: '#fff',
						textStyle: {
							color: '#5c6c7c'
						},
						padding: [10, 10],
						extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
					},
					grid: {
						top: '15%'
					},
					xAxis: [{
						type: 'category',
						data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
						axisLine: {
							lineStyle: {
								color: '#DCE2E8'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							interval: 0,
							textStyle: {
								color: '#556677'
							},
							// 默认x轴字体大小
							fontSize: 12,
							// margin:文字到x轴的距离
							margin: 15
						},
						axisPointer: {
							label: {
								// padding: [11, 5, 7],
								padding: [0, 0, 10, 0],

								// 这里的margin和axisLabel的margin要一致!
								margin: 15,
								// 移入时的字体大小
								fontSize: 12,
								backgroundColor: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#fff' // 0% 处的颜色
									}, {
										// offset: 0.9,
										offset: 0.86,

										color: '#fff' // 0% 处的颜色
									}, {
										offset: 0.86,
										color: '#33c0cd' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#33c0cd' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						boundaryGap: false
					}],
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#DCE2E8'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#556677'
							}
						},
						splitLine: {
							show: false
						}
					}, {
						type: 'value',
						position: 'right',
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#556677'
							},
							formatter: '{value}'
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#DCE2E8'
							}
						},
						splitLine: {
							show: false
						}
					}],
					series: [{
						name: 'Adidas',
						type: 'line',
						data: [10, 10, 30, 12, 15, 3, 7],
						symbolSize: 1,
						symbol: 'circle',
						smooth: true,
						yAxisIndex: 0,
						showSymbol: false,
						lineStyle: {
							width: 5,
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: '#9effff'
							},
								{
									offset: 1,
									color: '#9E87FF'
								}
							]),
							shadowColor: 'rgba(158,135,255, 0.3)',
							shadowBlur: 10,
							shadowOffsetY: 20
						},
						itemStyle: {
							normal: {
								color: colorList[0],
								borderColor: colorList[0]
							}
						}
					}, {
						name: 'Nike',
						type: 'line',
						data: [5, 12, 11, 14, 25, 16, 10],
						symbolSize: 1,
						symbol: 'circle',
						smooth: true,
						yAxisIndex: 0,
						showSymbol: false,
						lineStyle: {
							width: 5,
							color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
								offset: 0,
								color: '#73DD39'
							},
								{
									offset: 1,
									color: '#73DDFF'
								}
							]),
							shadowColor: 'rgba(115,221,255, 0.3)',
							shadowBlur: 10,
							shadowOffsetY: 20
						},
						itemStyle: {
							normal: {
								color: colorList[1],
								borderColor: colorList[1]
							}
						}
					},
						{
							name: '老北京布鞋',
							type: 'line',
							data: [150, 120, 170, 140, 500, 160, 110],
							symbolSize: 1,
							yAxisIndex: 1,
							symbol: 'circle',
							smooth: true,
							showSymbol: false,
							lineStyle: {
								width: 5,
								color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
									offset: 0,
									color: '#fe9a'
								},
									{
										offset: 1,
										color: '#fe9a8b'
									}
								]),
								shadowColor: 'rgba(254,154,139, 0.3)',
								shadowBlur: 10,
								shadowOffsetY: 20
							},
							itemStyle: {
								normal: {
									color: colorList[2],
									borderColor: colorList[2]
								}
							}
						}
					]
				};

				line2.setOption(option);

				window.onresize = function() {
					line2.resize();
				}
			})
		</script>

		<script>
			layui.use(['echarts'], function() {
				let echarts = layui.echarts;

				var line1 = echarts.init(document.getElementById('line1'));

				const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
				option = {

					backgroundColor: '#fff',
					tooltip: {
						show: false
					},
					grid: {
						top: '10%',
						bottom: '6%',
						left: '6%',
						right: '6%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								fontSize: 14,
								color: 'rgba(#999)',
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#939ab6',
								opacity: .15
							}
						},
						data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50']
					},],
					yAxis: [{
						type: 'value',
						offset: 15,
						max: 100,
						min: 0,
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							margin: 10,
							textStyle: {
								fontSize: 14,
								color: '#999',
							}
						},
						splitLine: {
							show: false
						}

					}],
					series: [{
						name: '2',
						type: 'line',
						z: 3,
						showSymbol: false,
						smoothMonotone: 'x',
						lineStyle: {
							width: 3,
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: 'rgba(59,102,246)' // 0% 处的颜色
								}, {
									offset: 1, color: 'rgba(118,237,252)' // 100% 处的颜色
								}]
							},
							shadowBlur: 4,
							shadowColor: 'rgba(69,126,247,.2)',
							shadowOffsetY: 4
						},
						areaStyle: {
							normal: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(227,233,250,.9)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(248,251,252,.3)' // 100% 处的颜色
									}]
								}
							}
						},
						smooth: true,
						data: [20, 56, 17, 40, 68, 42]
					},{
						name: '1',
						type: 'line',
						showSymbol: false,
						smoothMonotone: 'x',

						lineStyle: {
							width: 3,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(255,84,108)'
							}, {
								offset: 1,
								color: 'rgba(252,140,118)'
							}], false),
							shadowBlur: 4,
							shadowColor: 'rgba(253,121,128,.2)',
							shadowOffsetY: 4
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(255,84,108,.15)'
							}, {
								offset: 1,
								color: 'rgba(252,140,118,0)'
							}], false),
						},
						smooth: true,
						data: [20, 71, 8, 50, 57, 32]
					}, ]

				};

				line1.setOption(option);

				window.onresize = function() {
					line1.resize();
				}
			})
		</script>

		<script>
			layui.use(['echarts'], function() {
				let echarts = layui.echarts;

				var line3 = echarts.init(document.getElementById('line3'));

				const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']

				option = {
					backgroundColor: '#fff',
					title: {
						text: "告警数",
						left: "18px",
						top: "0",
						textStyle: {
							color: "#999",
							fontSize: 12,
							fontWeight: '400'
						}
					},
					color: ['#73A0FA', '#73DEB3', '#FFB761'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							},
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					grid: {
						left: '25',
						right: '25',
						bottom: '24',
						top: '75',
						containLabel: true
					},
					legend: {
						data: ['上周', '本周'],
						orient: 'horizontal',
						icon: "rect",
						show: true,
						left: 20,
						top: 25,
					},
					xAxis: {
						type: 'category',
						data: ['爱立信端局', '中兴端局', '爱立信HSS', '中兴HSS', '华为HSS', '华为智能网', '中兴VIMS'],
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: '#999',
							textStyle: {
								fontSize: 12
							},
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#F3F4F4'
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
					},
					series: [{
						name: '上周',
						type: 'line',
						smooth: true,
						data: [1800, 1000, 2000, 1000, 500, 100, 1200]
					},
						{
							name: '本周',
							type: 'line',
							smooth: true,
							data: [1700, 999, 1100, 899, 199, 99, 1000]
						}
					]
				};

				line3.setOption(option);

				window.onresize = function() {
					line3.resize();
				}
			})
		</script>

		<script>
			layui.use(['echarts'], function() {
				let echarts = layui.echarts;

				var line4 = echarts.init(document.getElementById('line4'));

				const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
				option = {
					title: {
						text: '用电量'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['2018', '2019']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,//坐标轴两边留白
						data: ['12201', '12202', '12203','12204','12301','12302','12303','12304','12401', '12402', '12403','12404'],
						axisLabel: { //坐标轴刻度标签的相关设置。
							interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
							//	margin:15,
							textStyle: {
								color: '#1B253A',
								fontStyle: 'normal',
								fontFamily: '微软雅黑',
								fontSize: 12,
							},
							formatter:function(params) {
								var newParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 4;  //一行显示几个字
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										newParamsName += tempStr;
									}

								} else {
									newParamsName = params;
								}
								return newParamsName
							},
							//rotate:50,
						},
						axisTick:{//坐标轴刻度相关设置。
							show: false,
						},
						axisLine:{//坐标轴轴线相关设置
							lineStyle:{
								color:'#E5E9ED',
								// opacity:0.2
							}
						},
						splitLine: { //坐标轴在 grid 区域中的分隔线。
							show: true,
							lineStyle: {
								color: '#E5E9ED',
								// 	opacity:0.1
							}
						}
					},
					yAxis: [
						{
							type: 'value',
							splitNumber: 5,
							axisLabel: {
								textStyle: {
									color: '#a8aab0',
									fontStyle: 'normal',
									fontFamily: '微软雅黑',
									fontSize: 12,
								}
							},
							axisLine:{
								show: false
							},
							axisTick:{
								show: false
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#E5E9ED',
									// 	opacity:0.1
								}
							}

						}
					],
					series: [
						{
							name: '2018',
							type: 'line',
							itemStyle: {
								normal: {
									color:'#3A84FF',
									lineStyle: {
										color: "#3A84FF",
										width:1
									},
									areaStyle: {
										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
											offset: 0,
											color: 'rgba(58,132,255,0)'
										}, {
											offset: 1,
											color: 'rgba(58,132,255,0.35)'
										}]),
									}
								}
							},
							data: [ 1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4]
						},
						{
							name: '2019',
							type: 'line',
							itemStyle: {
								normal: {
									color:'rgba(255,80,124,1)',
									lineStyle: {
										color: "rgba(255,80,124,1)",
										width:1
									},
									areaStyle: {
										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
											offset: 0,
											color: 'rgba(255,80,124,0)'
										}, {
											offset: 1,
											color: 'rgba(255,80,124,0.35)'
										}]),
									}
								}
							},
							data: [9, 5,7,8,6,7,8,7,7,6,8,6]
						}
					]
				};


				line4.setOption(option);

				window.onresize = function() {
					line4.resize();
				}
			})
		</script>
	</body>
</html>
